import { SetupContext, defineComponent, getCurrentInstance } from 'vue'
import { CheckboxEmit, CheckboxProps, checkboxEmit, checkboxProps } from './checkbox-types'
import useCheckbox from './hooks/use-checkbox'
import { useNamespace } from '../shared/hooks/useNamespace'

export default defineComponent({
  name: 'FsCheckbox',
  props: checkboxProps,
  emit: checkboxEmit,
  setup(props: CheckboxProps, ctx: SetupContext<CheckboxEmit>) {
    const { label, value, halfChecked, disabled, isTitle, direction, checked, changeHandle } = useCheckbox(props, ctx)
    const instance = getCurrentInstance()
    const uid = `fs-cb-${instance?.uid}`
    const ns = useNamespace('checkbox')
    return () => {
      return (
        <div class={[ns.b(), ns.is('disabled', disabled.value), ns.is('indeterminate', halfChecked.value), ns.m(direction.value)]}>
          <div class={[ns.m('wrapper')]}>
            <input type="checkbox" class={[ns.m('input')]} disabled={disabled.value} id={uid} indeterminate={halfChecked.value} checked={checked.value} onChange={changeHandle} />
            <label for={uid} class={[ns.m('checkbox')]}></label>
          </div>
          {isTitle.value ? (
            <label class={[ns.m('label')]} for={uid}>
              {label.value || ctx.slots.default?.()}
            </label>
          ) : null}
        </div>
      )
    }
  }
})
